<template>
  <div v-if="game" class="game-container">
    <div class="game-header">
      <h2>{{ game.name }}</h2>
      <img v-if="game.imageUrl" :src="game.imageUrl" :alt="game.name" class="game-image">
      <div class="screenshots" v-if="game.screenshots && game.screenshots.length">
        <h3>游戏截图</h3>
        <div class="screenshot-container">
          <carousel :items-to-show="1" :wrap-around="true">
            <slide v-for="(screenshot, index) in game.screenshots" :key="index">
              <img :src="screenshot" 
                   :alt="'截图' + (index + 1)"
                   class="screenshot"
                   @click="openScreenshot(screenshot)">
            </slide>
            <template #addons>
              <navigation />
              <pagination />
            </template>
          </carousel>
        </div>
      </div>
    </div>
    <div class="game-info">
      <p class="game-description">{{ game.description }}</p>
      <p class="game-price">价格: ¥{{ game.price }}</p>
      <button @click="purchaseGame" class="purchase-btn" v-if="!game.purchased">购买游戏</button>
      <button class="purchased-btn" v-else>已购买</button>
    </div>
    
    <div class="reviews">
      <h3>评论</h3>
      <div v-for="review in reviews" :key="review.id" class="review-item">
        <p>{{ review.content }}</p>
        <p>评分: {{ review.rating }}/5</p>
      </div>
      
      <div class="add-review">
        <h4>添加评论</h4>
        <textarea v-model="newReview.content" placeholder="写下你的评论"></textarea>
        <div class="rating-system">
          <span v-for="star in 5" :key="star" @click="setRating(star)">
            <i :class="['fa-star', star <= newReview.rating ? 'fas' : 'far']"></i>
          </span>
        </div>
        <button @click="submitReview">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameDetail',
  data() {
    return {
      game: null,
      reviews: [],
      newReview: {
        content: '',
        rating: null
      },
      activeScreenshot: null
    }
  },
  props: ['id'],
  async created() {
    await this.fetchGame()
    await this.fetchReviews()
  },
  methods: {
    openScreenshot(url) {
      this.activeScreenshot = url;
      this.$nextTick(() => {
        this.$refs.screenshotModal.show();
      });
    },
    async fetchGame() {
      try {
        const response = await this.$http.get(`/games/${this.id}`)
        this.game = response.data
      } catch (error) {
        console.error('获取游戏详情失败:', error)
      }
    },
    async fetchReviews() {
      try {
        const response = await this.$http.get(`/games/${this.id}/reviews`)
        this.reviews = response.data
      } catch (error) {
        console.error('获取评论失败:', error)
      }
    },
    async submitReview() {
      try {
        await this.$http.post(`/games/${this.id}/reviews`, this.newReview)
        this.newReview = { content: '', rating: null }
        await this.fetchReviews()
      } catch (error) {
        console.error('提交评论失败:', error)
      }
    },
    async purchaseGame() {
      try {
        await this.$http.post(`/games/${this.id}/purchase`)
        alert('购买成功！')
      } catch (error) {
        console.error('购买失败:', error)
        alert('购买失败，请重试')
      }
    }
  }
}
</script>

<style scoped>
.game-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.game-header {
  text-align: center;
  margin-bottom: 20px;
}
.game-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  margin: 10px 0;
}

.screenshots {
  margin: 20px 0;
}

.screenshot-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.screenshot {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.screenshot:hover {
  transform: scale(1.05);
}

.purchased-btn {
  background-color: #9E9E9E;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: not-allowed;
}
.game-info {
  margin: 20px 0;
}
.purchase-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.purchase-btn:hover {
  background-color: #45a049;
}
.review-item {
  margin: 10px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.add-review {
  margin-top: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 4px;
}
textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>